<html>
    <head>
        <title>D3 Reporting Program</title>
        <script type="text/javascript" src="d3/d3.v2.js"></script>
		<style type="text/css">
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			
			.name {
				text-align: center;
				font-family: sans-serif;
				font-size: 40px;
				color: steelblue;
				padding-top: 20px;
			}
		</style>
		<h1 class="name"><u>Metric Analyzis Report</u></h1>
    </head>
    <body>
       <script type="text/javascript">
	    /*
		 *create some variables especially the color used in the main bar chart, the scales that are used to make the data
		 *length that fit within the boundaries of the boxes and also to create the axis (same one is used, and therefore it has correct values)
		 **/
		var mtrCol = ["darkgreen","steelblue","orange","blueviolet","red","blue","black","mediumaquamarine"],
			svgWidth = 1200,
			svgHeight = 365,
			svgWidthHistComt = 400,
			svgHeightHistComt = 350,
			svgRightWidth = 450,
			techDebtHeight = 100,
			commentHeight = 110,
			xScale = d3.scale.linear(),
			historyYScale = d3.scale.linear(),
			commentYScale = d3.scale.linear(),
			padding = 40;
				

		
		
		var projectList = [],
			projectNumber = 0
			projectName = [];
		
		var loadPath = "../log/";
		
		//loads all used file EXCEPT the project specific files, they are loaded later in the 'for' loop
		d3.csv(loadPath + "FolderList.csv", function(folders){
		d3.csv(loadPath + folders[folders.length-1].FolderNames +"/History.csv", function(history) {
		d3.csv(loadPath + folders[folders.length-1].FolderNames +"/MetricCPD.csv", function(comment) {
		d3.csv(loadPath + folders[folders.length-1].FolderNames +"/HighestWeightClasses.csv", function(hwc) {
		d3.csv(loadPath + folders[folders.length-1].FolderNames +"/HighestRedRangeClasses.csv", function(hrrc) {
		d3.csv(loadPath + folders[folders.length-1].FolderNames +"/SumProjects.csv", function(sumProjects) {
		d3.csv(loadPath + folders[folders.length-1].FolderNames +"/NumberOfClassesInProjects.csv", function(classesPerProj) {
		d3.csv(loadPath + folders[folders.length-1].FolderNames +"/ChangeListOfAllClasses.csv", function(changedCls) {
		
		//creates all svg element which information are visualized in
		//d3.selectAll("body").style("background-color", "#eeeeee");
		
		//the two svg fields that CONTAINS everyting except the * text under (these are needed to make the placement of information correct. it holds other svgs
		var leftHolder = d3.select("body").append("svg").attr("width", svgWidth).attr("height", svgHeight + svgHeightHistComt);
		var rightHolder = d3.select("body").append("svg").attr("width", svgRightWidth).attr("height", svgHeight + svgHeightHistComt);
		
		//these are the * text under the information, a-xlink:href creates the link
		d3.select("body").append("br");
		var note = d3.select("body").append("p").text("*For more information click the headings and for detailed information click the blue, underlined, project names");
		var basicInfo = d3.select("body").append("svg").attr("height",25)
										 .append("a").attr("xlink:href","projectInformation/BasicInformation.html")
										 .append("text").text("**For basic information click here").attr("y",12).attr("fill","blue").attr("text-decoration","underline");
		var txtInfo = d3.select("body").append("svg").attr("height",20)
									   .append("a").attr("xlink:href","../log/" + folders[folders.length-1].FolderNames + "/")
									   .append("text").text("***For all gathered data click here").attr("y",12).attr("fill","blue").attr("text-decoration","underline");
		//Left side ("weighted metrics for projects","History chart","Comment Percentage","Weighted classes the ten worst")
		
		//svg field: "weighted metrics for projects"
		var overviewHolder = leftHolder
							   .append("svg")
							   .attr("width", svgWidth)
							   .attr("height", svgHeight);
		
		//creates the heading for "Weighted metrics for the projects" and make it a link to information page
		overviewHolder.append("a").attr("xlink:href","projectInformation/TotalWeightBarChart.html").append("text").text("Technical Debt for projects").attr("x",svgWidth/2 - 120).attr("y", 20).attr("text-decoration","underline").attr("font-weight",600);
		
		//creates the four lines that are around the box
		overviewHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", svgWidth).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);
		overviewHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", svgHeight - 3).attr("stroke","black").attr("stroke-width",3);
		overviewHolder.append("line").attr("x1", 0).attr("y1", svgHeight - 3).attr("x2", svgWidth).attr("y2", svgHeight - 3).attr("stroke","black").attr("stroke-width",3);
		overviewHolder.append("line").attr("x1", svgWidth).attr("y1", svgHeight - 3).attr("x2", svgWidth).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);		
									
		//make sure that "history chart","comment percentage","weighted the ten worst" are placed UNDER the "weighted metrics for projects"
		leftHolder.append("br");
		
		//svg for: "History chart", contains its information (barchart)
		var historyHolder = leftHolder
							  .append("svg")
							  .attr("width", svgWidthHistComt)
							  .attr("height", svgHeightHistComt)
							  .attr("x", 0)
							  .attr("y", svgHeight);
		
		//heading for "History chart" and a link to its information page.
		historyHolder.append("a").attr("xlink:href","projectInformation/History.html").append("text").text("History chart").attr("x",svgWidthHistComt/2 - 60).attr("y", 20).attr("text-decoration","underline").attr("font-weight",600);
		historyHolder.append("a").attr("xlink:href","projectDetails/History.html").append("text").text("click for longer timespan").attr("x", 20).attr("y", svgHeightHistComt - 20).attr("text-decoration","underline").attr("font-weight",600);
		
		//creates the four lines that are around the box
		historyHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", svgWidthHistComt - 3).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);
		historyHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", svgHeightHistComt).attr("stroke","black").attr("stroke-width",3);
		historyHolder.append("line").attr("x1", 0).attr("y1", svgHeightHistComt).attr("x2", svgWidthHistComt - 3).attr("y2", svgHeightHistComt).attr("stroke","black").attr("stroke-width",3);
		historyHolder.append("line").attr("x1", svgWidthHistComt - 3).attr("y1", svgHeightHistComt).attr("x2", svgWidthHistComt - 3).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);		
		
		
		//svg for: "Techincal Debt" and "Changed classes"
		var technicalDebtAndChangedClasses = leftHolder
							  .append("svg")
							  .attr("width", svgWidthHistComt)
							  .attr("height", svgHeightHistComt)
							  .attr("x", svgWidthHistComt)
							  .attr("y", svgHeight);
		
		//svg for: "Technical Debt"
		var techDebtHolder = technicalDebtAndChangedClasses.append("svg")
					.attr("width", svgRightWidth)
					.attr("height", techDebtHeight)
					.attr("y", 0);
		
		//Creates the heading for "Technical Debt" and makes it a link to information page.
		techDebtHolder.append("a").attr("xlink:href","projectInformation/TechnicalDebt.html").append("text").text("Technical Debt").attr("x",svgRightWidth/2 - 80).attr("y", 20).attr("text-decoration","underline").attr("font-weight",600);
		
		//creates the four lines that are around the box
		techDebtHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", svgWidthHistComt - 3).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);
		techDebtHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", techDebtHeight - 3).attr("stroke","black").attr("stroke-width",3);
		techDebtHolder.append("line").attr("x1", 0).attr("y1", techDebtHeight - 3).attr("x2", svgWidthHistComt - 3).attr("y2", techDebtHeight - 3).attr("stroke","black").attr("stroke-width",3);
		techDebtHolder.append("line").attr("x1", svgWidthHistComt - 3).attr("y1", techDebtHeight - 3).attr("x2", svgWidthHistComt - 3).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);		

		//svg for: "Changed classes"
		var changedClasses = technicalDebtAndChangedClasses.append("svg")
					.attr("width", svgRightWidth)
					.attr("height", svgWidthHistComt - techDebtHeight)
					.attr("y", techDebtHeight);
		
		//Creates the heading for "Technical Debt" and makes it a link to information page.
		changedClasses.append("a").attr("xlink:href","projectInformation/ChangedClasses.html").append("text").text("Changed Classes").attr("x",svgRightWidth/2 - 85).attr("y", 20).attr("text-decoration","underline").attr("font-weight",600);
		
		//creates the four lines that are around the box
		changedClasses.append("line").attr("x1", 0).attr("y1", 0).attr("x2", svgWidthHistComt - 3).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);
		changedClasses.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", svgHeightHistComt - techDebtHeight).attr("stroke","black").attr("stroke-width",3);
		changedClasses.append("line").attr("x1", 0).attr("y1", svgHeightHistComt - techDebtHeight).attr("x2", svgWidthHistComt - 3).attr("y2", svgHeightHistComt - techDebtHeight).attr("stroke","black").attr("stroke-width",3);
		changedClasses.append("line").attr("x1", svgWidthHistComt - 3).attr("y1", svgHeightHistComt - techDebtHeight).attr("x2", svgWidthHistComt - 3).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);		

		
		
		
		//svg for: "Weighted classes the ten worst" and "Comment percentage"
		var weigthedClassesAndCommentsHolder = leftHolder
							  .append("svg")
							  .attr("width", svgWidthHistComt)
							  .attr("height", svgHeightHistComt)
							  .attr("x", svgWidthHistComt*2)
							  .attr("y", svgHeight);
		
		//svg for: "Weighted classes the ten worst", contains its information (text) 
		var weightedClassesTheTenWorst = weigthedClassesAndCommentsHolder
							  .append("svg")
							  .attr("width", svgWidthHistComt)
							  .attr("height", svgHeightHistComt - commentHeight)
							  .attr("x", 0)
							  .attr("y", 0);
		
		//this is the heading for "Weighted classes the ten worst" and make the heading a link to its information page
		weightedClassesTheTenWorst.append("a").attr("xlink:href","projectInformation/TopTenWorstClasses.html").append("text").text("The ten worst classes").attr("x",svgWidthHistComt/2 - 90).attr("y", 20).attr("text-decoration","underline").attr("font-weight",600);
		
		//creates the four lines that are around the box
		weightedClassesTheTenWorst.append("line").attr("x1", 0).attr("y1", 0).attr("x2", svgWidthHistComt).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);
		weightedClassesTheTenWorst.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", svgHeightHistComt - commentHeight - 3).attr("stroke","black").attr("stroke-width",3);
		weightedClassesTheTenWorst.append("line").attr("x1", 0).attr("y1", svgHeightHistComt - commentHeight - 3).attr("x2", svgWidthHistComt).attr("y2", svgHeightHistComt - commentHeight - 3).attr("stroke","black").attr("stroke-width",3);
		weightedClassesTheTenWorst.append("line").attr("x1", svgWidthHistComt).attr("y1", svgHeightHistComt - commentHeight - 3).attr("x2", svgWidthHistComt).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);		
		
		//svg for: "Comment percentage", contains its information (the text)
		var commentHolder = weigthedClassesAndCommentsHolder
							  .append("svg")
							  .attr("width", svgWidthHistComt)
							  .attr("height", commentHeight)
							  .attr("x", 0)
							  .attr("y", svgHeightHistComt - commentHeight);
		
		//heading for "Comment Percentage" and makes it a link to the information page
		commentHolder.append("a").attr("xlink:href","projectInformation/CommentPercentage.html").append("text").text("Comment percentage").attr("x",svgWidthHistComt/2 - 78).attr("y", 20).attr("text-decoration","underline").attr("font-weight",600);
		
		//creates the four lines that are around the box
		commentHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", svgWidthHistComt).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);
		commentHolder.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", commentHeight).attr("stroke","black").attr("stroke-width",3);
		commentHolder.append("line").attr("x1", 0).attr("y1", commentHeight).attr("x2", svgWidthHistComt).attr("y2", commentHeight).attr("stroke","black").attr("stroke-width",3);
		commentHolder.append("line").attr("x1", svgWidthHistComt).attr("y1", commentHeight).attr("x2", svgWidthHistComt).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);		
		
		
		//Right side ("System weight difference summary","Metric weight difference summary","Technical Debt")
		
		//Svg for: "System weight difference summary" and "Metric weight difference summary" and contains it information (piecharts and text)
		var overviewPieHolder = rightHolder.append("svg")
					.attr("width", svgWidthHistComt + 50)
					.attr("height", svgHeight + svgHeightHistComt);
		
		//Creates the headings and makes them links to information page for: "System weight difference summary" and "Metric weight difference summary"
		overviewPieHolder.append("a").attr("xlink:href","projectInformation/TotalWeightPieCharts.html").append("text").text("System debt difference").attr("x",svgRightWidth/2 - 90).attr("y", 20).attr("text-decoration","underline").attr("font-weight",600);
		overviewPieHolder.append("a").attr("xlink:href","projectInformation/TotalWeightPieCharts.html").append("text").text("Metric debt difference").attr("x",svgRightWidth/2 - 85).attr("y", 245).attr("text-decoration","underline").attr("font-weight",600);
		overviewPieHolder.append("a").attr("xlink:href","projectInformation/TotalWeightPieCharts.html").append("text").text("Metric debt per class for projects").attr("x",svgRightWidth/2 - 130).attr("y", 500).attr("text-decoration","underline").attr("font-weight",600);
		
		//creates the four lines that are around the box
		overviewPieHolder.append("line").attr("x1", 3).attr("y1", 0).attr("x2", svgRightWidth).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);
		overviewPieHolder.append("line").attr("x1", 3).attr("y1", 0).attr("x2", 3).attr("y2", svgHeight + svgHeightHistComt).attr("stroke","black").attr("stroke-width",3);
		overviewPieHolder.append("line").attr("x1", 3).attr("y1", svgHeight + svgHeightHistComt).attr("x2", svgRightWidth).attr("y2", svgHeight + svgHeightHistComt).attr("stroke","black").attr("stroke-width",3);
		overviewPieHolder.append("line").attr("x1", svgRightWidth).attr("y1", svgHeight + svgHeightHistComt).attr("x2", svgRightWidth).attr("y2", 0).attr("stroke","black").attr("stroke-width",3);		
					
		//end of svgs
		
		
		//get folder name

		
		/*
		 * Here comes some basic information to understand this problematic code!
		 * d3.csv is the function that loads file in d3 (D3 is the addon to javascript that we use to display the information in charts and such in this reportin
		 * webpage).
		 * 
		 * d3.csv is an asynchronous function (and i may not have understand it totally why and so but the concensus is that everything loaded is loaded 
		 * after the other code has been executed. i.e., loadFileNr will be == sumProjects.length-3 when first file is loaded) and therefore all
		 * execution regarding information is done within the loadfunction (under here).
		 * 
		 * To manage loading x nr of files we needed a for loop, the variable loadFileNr is useless in the callbackfunction in csv and therefore to
		 * manage to load all the information into a list and make it usable, a global variable (projectNumber) was created and is incremented within the
		 * callback function (in the end after the biiig if, getting there now).
		 *
		 * To make sure everything is done the number of time WE want it to be done almost everything is within an 'if' that check that the code
		 * is executed once, and that once is when all necessary files are loaded.
		 **/
		for(var loadFileNr = 0; loadFileNr < (sumProjects.length-3); loadFileNr++){
			d3.csv(loadPath + folders[folders.length-1].FolderNames +"/projCSV" + sumProjects[loadFileNr].ProjectName + ".csv", function(projectData) {
				//project data is the information gotten from the csv files.
				projectList[projectNumber] = projectData;
				
				
				//this was a little something i tried to make sure that the bars got the right name to them. Because of the asynchroniouzly loading
				//the project name labels can get wrong, this under here does not work, just update the screen with F5 once and it should be right
				//(this is because then the files are loaded in the cache and then they are executed in the right order).
				for(var i = 0; i < sumProjects.length - 3; i++)
				{
					if((projectData[projectData.length - 1].Value + 1) == sumProjects[i].Value)
					{
						projectName[projectNumber] = sumProjects[projectNumber].ProjectName
					}
				}
				//check that files are loaded
				if(projectNumber == (sumProjects.length - 4)){
					
					//initiate the scale to make information and bars to fit into the box
					xScale.domain([0, d3.max(sumProjects, function(d) { return d.ProjectName == "TOTAL" || d.ProjectName == "TOTALREDDEBT" || d.ProjectName == "TOTALYELLOWDEBT" ? 0 : (+d.Value); })])
						 .range([0, svgWidth-100]);
					
					//Weighted metrics for the projects
					
					//adds all the metric names and give them colours and placement
					overviewHolder.append("g")
								.attr("x", 70)
								.attr("y", 40)
								.attr("width", 100)
								.attr("height", 20)
								.selectAll("text")
								.data(projectList[projectNumber])
								.enter().append("text")
								.text(function(d) {return d.MetricName == "SUM" ? "" : d.MetricName })
								.attr("x", function(d,i){return i<4 ? i*220 + 70 : (i%4)*220 + 70;})
								.attr("y", function(d,i){return i<4 ? 40 : 60;})
								.attr("width", 100)
								.attr("height", 20)
								.attr("fill", function(d,i){return mtrCol[i];});
					
					//Create all bars and all information within them
					for(var i = 0; i < sumProjects.length -3; i++){
						var mtrXPos = [];
						mtrXPos[0] = 0;
						//mtrXPos is ised to decide where the bars should start and how long they should be.
						for(var j = 0; j < projectList[i].length; j ++){
							mtrXPos[j + 1] = xScale(projectList[i][j].Value);
							mtrXPos[j + 1] += mtrXPos[j];
						}
						
						//creates a holder for the projectnames that are infront (to the left) of the bars 
						var textHolderProjName = overviewHolder.append("g")
										  .attr("width", 70)
										  .attr("height", 20)
										  .attr("x", 0)
										  .attr("y", i*25 + 70);
						
						//create the projectname and makes them links and make them look like links
						var textHolder = textHolderProjName.append("a")
										  .attr("xlink:href","projectDetails/" + projectList[i][0].ProjName + ".html")
										  .append("text")
										  .text(projectList[i][0].ProjName)
										  .attr("x", 5)
										  .attr("y", i*25 + 15 + 70)
										  .attr("fill", "blue")
										  .attr("text-decoration","underline");
						
						//create a holder for the text information (in the top left corner) and for the bars ("rect")
						var rectAndTextHolder = overviewHolder.append("g")
										  .attr("width", svgWidth)
										  .attr("height", 20)
										  .attr("x", 50)
										  .attr("y", i*25 + 70);
						
						//initiate the textfiled for the colored text in the top left corner that changes when holding over a bar
						rectAndTextHolder.append("text")
										  .text("")
										  .attr("height", 2)
										  .attr("x", 10)
										  .attr("y", 40);						
						
						//initiate the textfiled for the red text that changes when holding over a bar.
						var onMOTextTwo = rectAndTextHolder.append("g")
										  .append("text")
										  .text("")
										  .attr("height", 20)
										  .attr("x", 10)
										  .attr("y", 60);
						
						//creates the bars, and also an 'actionlistener' (.on("mouseover"..) that change the text when holding over the bar
						var rectHolder = rectAndTextHolder.selectAll("rect")
										  .data(projectList[i])
										  .enter().append("rect")
										  .attr("x", function(d,k){ return mtrXPos[k] + 20 + 50; })
										  .attr("y", i*25 + 70)
										  .attr("width", function(d){return d.MetricName == "SUM" ? 0 : xScale(d.Value);})
										  .attr("height", 19)
										  .attr("fill", function(d,k){ return mtrCol[k] })
										  .on("mouseover", function(d,k) {
												rectAndTextHolder.select("text").text(d.Value).attr("fill", mtrCol[k]).attr("font-weight", 800);
												onMOTextTwo.text(d.RedNum).attr("fill", "Red").attr("font-weight", 800);
										  });
					}
					
					//creates the axis that are under the bars
					overviewHolder.append("g")
								.attr("class", "axis")
								.attr("transform", "translate(70," + (i*25 + 15 + 60) + ")")
								.call(d3.svg.axis()
									.scale(xScale)
									.orient("bottom"));
								
					
							
					//history diagram
					
					//set the scale that makes the information stay in the box
					var historyBalancer = d3.min(history, function(d) { return +d.Value >= 0 ? (+d.Value) : (-d.Value); });
					
					historyYScale.domain([historyBalancer-1, d3.max(history, function(d) { return +d.Value >= 0 ? (+d.Value) : (-d.Value); })])
								 .range([svgHeightHistComt - 190, 0]);
					
					//creates the bars in the barchart *CARE WHEN CHANGING THE CODE* small changes may mess up the placing of objects here pretty badly
					//If color of bars is green that would mean that the technical debt is negative, which probably wont happen, probably a bug then... so you know ;)
					var histCol = "red",
						histVal = 0,
						hStart = 0;
					
					if(history.length-6 > 0)
					{
						hStart = history.length-6;
					}
					else
					{
						hStart = 0;
					}
					
					for(var h = hStart; h < history.length; h++){
						if(+history[h].Value > 0) {
							histCol = "red";
							histVal = +history[h].Value;
						}
						else{
							histCol = "green";
							histVal = (-history[h].Value);
						}
						var rectHoldersHist = historyHolder.append("rect")
										  .attr("x", (h-hStart)*40 + 80)
										  .attr("y", historyYScale(histVal) + padding)
										  .attr("width", 20)
										  .attr("height", svgHeightHistComt - 150 - (padding) - historyYScale(histVal))
										  .attr("fill", histCol);
						
						//cretates the text to the bars (with the date).
						var textHoldersHist = historyHolder.append("text")
										  .attr("transform","rotate(90)")
										  .text( function(){
											var histText = "";
											for(var i = 0; i < 8; i++){
												histText += history[h].Time[i];
											}
											return histText;
										  })
										  .attr("x", svgHeightHistComt - 150 + 10)
										  .attr("y", -(((h-hStart)-1)*40 + 124) );
					}
					
					//the left axis
					historyHolder.append("g")
								.attr("class", "axis")
								.attr("transform", "translate(60, "+ (padding - 1) +")")
								.call(d3.svg.axis()
									.scale(historyYScale)
									.orient("left"));
					
					//right axis
					historyHolder.append("g")
								.attr("class", "axis")
								.attr("transform", "translate("+ ((history.length - hStart)*40 + 80) +", "+ (padding - 1) +")")
								.call(d3.svg.axis()
									.scale(historyYScale)
									.orient("right"));
									
									
					//implementation of Technical Debt
					var debt = 0,
						debtPerClass = [],
						interestValue = 0,
						interestPercentage = 0,
						mHourClass = 0,
						timeToMaintain = 0;
					
					//getting the time to fix
					for(var i = 0; i < sumProjects.length; i++)
					{
						sumProjects[i].ProjectName == "TOTAL" ? debt = sumProjects[i].Value : null;
					}
					
					//getting the interest
					for(var i = 0; i < sumProjects.length - 3; i ++)
					{
						for(var j = 0; j < classesPerProj.length; j ++)
						{
							if(classesPerProj[j].Project == sumProjects[i].ProjectName)
							{
								debtPerClass[i] = sumProjects[i].Value/classesPerProj[j].Number;
								if(debtPerClass[i] < 1)	{ mHourClass = 0.10; }
								else if(debtPerClass[i] < 2) { mHourClass = 0.30; }
								else if(debtPerClass[i] < 3) { mHourClass = 0.50; }
								else if(debtPerClass[i] < 4) { mHourClass = 0.70; }
								else if(debtPerClass[i] < 5) { mHourClass = 1.00; }
								else { mHourClass = 1.30;	}
								
								timeToMaintain += sumProjects[i].Value * mHourClass * 0.15;
								interestValue = (timeToMaintain / debt ) * 100;
								break;
							}	
						}							
					}
					
					//total technical debt
					techDebtHolder.append("text")
								  .attr("x", 50)
								  .attr("y", 60)
								  .text("" + Math.round(+debt + timeToMaintain))
								  .attr("font-size", 40);
					
					techDebtHolder.append("text")
								  .attr("x", 32)
								  .attr("y", 80)
								  .text("Total technical debt");
					
					//time to remove technical debt - just a number now
					techDebtHolder.append("text")
								  .attr("x", svgWidthHistComt / 2 - 20)
								  .attr("y", 51)
								  .text("" + debt)
								  .attr("font-size", 25);
								  
					techDebtHolder.append("text")
								  .attr("x", svgWidthHistComt / 2 + 50)
								  .attr("y", 51)
								  .text("Rework Effort");
					
					//interest of technical debt - just a number now
					techDebtHolder.append("text")
								  .attr("x", svgWidthHistComt / 2 - 20)
								  .attr("y", 76)
								  .text(Math.round(interestValue * 100) / 100 + "%")
								  .attr("font-size", 25);
								  
					techDebtHolder.append("text")
								  .attr("x", svgWidthHistComt / 2 + 50)
								  .attr("y", 76)
								  .text("Interest Rate");
					
					
					//implementation of Changed Classes
					
					for(var i = 0; i < 10 && i < changedCls.length; i++)
					{
						changedClasses.append("text")
									  .attr("x", 20)
									  .attr("y", i*21 + padding + 5)
									  .text(changedCls[i].ClassName.split(":")[0] + " : " + changedCls[i].ClassName.split(":")[changedCls[i].ClassName.split(":").length - 1] + " | debtchange = " + changedCls[i].ChangedWeight)
									  .attr("font-weight", 600)
									  .attr("fill", "#" + i*10 + "0000");
					}
					
					
					
					
				
					//Implements list for the weigted top ten worst classes.
					
					var dataForTopWeightName = [],
							dataForTopWeight = [],
							   dataForTopRed = [],
										   r = Math.min(svgWidthHistComt, (svgHeightHistComt)),
									   color = d3.scale.category20(),
									   donut = d3.layout.pie().sort(null),
										 arc = d3.svg.arc().innerRadius(0).outerRadius(r - 240);;
					
					//gather the information necessary in specific made list to create the list
					if(hrrc.length > 0) {
						for(var i = 0; i < 10; i++)
						{
							dataForTopRed[i] =  hrrc[i].RedRangeCount;
							dataForTopWeight[i] = hrrc[i].TotalWeight;
							dataForTopWeightName[i] = hrrc[i].ClassName;
						}
					}
					else
					{
						for(var i = 0; i < 10; i++)
						{
							dataForTopRed[i] = 0;
							dataForTopWeight[i] = hwc[i].Weight;
							dataForTopWeightName[i] = hwc[i].ClassName;
						}
					}
					
					//printing the list
					var theTenWorstText = weightedClassesTheTenWorst.selectAll("text")
									.data(dataForTopWeight)
								   .enter().append("svg:text")
								    .attr("x", 15)
									.attr("y", function(d,i) { return i*20 + 25; })
									.text(function(d, i) { return dataForTopRed[i] + " ("+dataForTopWeight[i] + ")" + ": " + dataForTopWeightName[i].split(":")[0] + " : " + dataForTopWeightName[i].split(":")[dataForTopWeightName[i].split(":").length - 1]; })
									.attr("fill", function(d,i) { return "#" + i*10 + "0000" ; })
									.attr("font-weight", 600);  
									
									
					//implementation of comment percentage
					
					//adding the numbers of the text (the 24,4% part, that changes depending on the result from the metric analyzer)
					commentHolder.append("g").selectAll("text")
								 .data(comment)
								.enter().append("text")
								 .text(function(d) {return Math.round(d.Value*100)/100 + "%";})
								 .attr("x", 5)
								 .attr("y", function(d,i) { return i*20 + padding + 5;})
								 .attr("font-weight",700);
					
					//adds the second, static part
					commentHolder.append("g").selectAll("text")
								 .data(comment)
								.enter().append("text")
								 .text(function(d) {return " of all " + d.Part + " in system is commented";})
								 .attr("x", 60)
								 .attr("y", function(d,i) { return i*20 + padding + 5;})
								 .attr("font-weight",500);				
									
					//implementation of piecharts for sum of projects and metric (the box with 2 piecharts to the right)
					
					var projDataForPieName = [],
							projDataForPie = [],
				debtPerClassDataForPieName = [],
					debtPerClassDataForPie = [],
						 projRedDataForPie = [],
				      metricDataForPieName = [],
						  metricDataForPie = [],
					   metricRedDataForPie = [],
										 r = Math.min(svgWidthHistComt, (svgHeightHistComt)),
									 color = d3.scale.category20(),
									 donut = d3.layout.pie().sort(null),
									   arc = d3.svg.arc().innerRadius(0).outerRadius(r - 260);
								smallerArc = d3.svg.arc().innerRadius(0).outerRadius(r - 270);
				
					//Gathering the information needed for creating the piecharts in lists that is easily used
					
					//top & bottom piechart
					for(var i = 0; i < sumProjects.length - 3; i ++)
					{
						//top
						projDataForPieName[i] = sumProjects[i].ProjectName;
						projDataForPie[i] = sumProjects[i].Value;
						//bottom
						debtPerClassDataForPieName[i] = sumProjects[i].ProjectName;
						for(var j = 0; j < classesPerProj.length; j ++)
						{
							if(classesPerProj[j].Project == debtPerClassDataForPieName[i])
							{
								debtPerClassDataForPie[i] = sumProjects[i].Value/classesPerProj[j].Number;
								break;
							}	
						}							
					}
					
					//top piechart
					for(var i = 0; i < projectList.length; i ++)
					{
						projRedDataForPie[i] = projectList[i][projectList[i].length - 1].RedNum;
					}
					
					//middle piechart
					for(var j = 0; j < projectList[0].length - 1; j++)
					{ 
						metricDataForPie[j] = 0;
						metricRedDataForPie[j] = 0;
					}
					
					//middle piechart
					for(var i = 0; i < projectList.length; i++)
					{
						for(var j = 0; j < projectList[i].length - 1; j++)
						{ 
							metricDataForPie[j] += +projectList[i][j].Value;
							metricRedDataForPie[j] += +projectList[i][j].RedNum;
						}
					}
					
					//middle piechart
					for(var i = 0; i < projectList[0].length - 1; i++)
					{
						metricDataForPieName[i] = projectList[0][i].MetricName.split(":")[1];
						var shorteningTmp = metricDataForPieName[i].split(" ")
						metricDataForPieName[i] = "";
						for(var j = 1; j < shorteningTmp.length; j++)
						{
							metricDataForPieName[i] += shorteningTmp[j][0];
						}
					}
					
					//Top-right piechart holder
					var chartHolder = overviewPieHolder.append("svg:svg")
										.attr("width", svgRightWidth)
										.attr("height", svgHeightHistComt)
										.append("svg:g")
										.attr("transform", "translate(" + (svgRightWidth / 2 + 85) + "," + 120 + ")");
					
					//creates the piechart
					var arcs = chartHolder.selectAll("path")
								  .data(donut(projDataForPie))
								.enter().append("svg:path")
								  .attr("fill", function(d,i) { return mtrCol[i]; })
								  .attr("d", arc);
								  
					//create holder for the text to the top pie chart
					var pieOneTextHolder = overviewPieHolder.append("g");
					
					//print the text to the top piechart
					var pieOneText = pieOneTextHolder.selectAll("text")
									.data(projDataForPie)
								   .enter().append("svg:text")
								    .attr("x", 45)
									.attr("y", function(d,i) { return i*20 + 50; })
									.text(function(d, i) { return projDataForPie[i] + " (" + projRedDataForPie[i] + ")" + " : " + projDataForPieName[i]; })
									.attr("fill", function(d,i) { return mtrCol[i]; })
									.attr("font-weight", 600);

									
					//middle-left pie chart
					
					//holder for the piechart
					var chartHolder2 = overviewPieHolder.append("svg:svg")
										.attr("width", svgRightWidth)
										.attr("height", svgHeight + svgHeightHistComt)
										.append("svg:g")
										.attr("transform", "translate(" + (svgRightWidth / 2 - 102) + "," + 360 + ")");
					
					//creating the piechart
					var arcs = chartHolder2.selectAll("path")
								  .data(donut(metricDataForPie))
								.enter().append("svg:path")
								  .attr("fill", function(d,i) { return mtrCol[i]; })
								  .attr("d", arc);		  
					
					//holder for the text to the middle pie chart
					var pieTwoTextHolder = overviewPieHolder.append("g");
					
					//printing the text to the middle piechart
					var pieTwoText = pieTwoTextHolder.selectAll("text")
									.data(metricDataForPie)
								   .enter().append("svg:text")
								    .attr("x", 250)
									.attr("y", function(d,i) { return i*20 + 285; })
									.text(function(d, i) { return metricDataForPie[i] + " (" + metricRedDataForPie[i] + ")" + " : " + metricDataForPieName[i]; })
									.attr("fill", function(d,i) { return mtrCol[i]; })
									.attr("font-weight", 600);
					
					
					//Bottom-right piechart holder
					
					var weightPerClassScale = d3.scale.linear();
					weightPerClassScale.domain([0, d3.max(debtPerClassDataForPie, function(d) { return d; })])
						 .range([0, 240]);
					
					
					
					var chartHolder3 = overviewPieHolder.append("svg:svg")
										.attr("width", svgRightWidth)
										.attr("height", svgHeight + svgHeightHistComt)
										.attr("transform", "translate(" + (svgRightWidth / 2 + 85) + "," + 610 + ")");
					
					
					var rects = chartHolder3.selectAll("rect")
											.data(debtPerClassDataForPie)
											.enter().append("rect")
											.attr("x", 170)
											.attr("y", function(d,i){ return i*20 + 510;})
											.attr("width", function(d) {return weightPerClassScale(d);})
											.attr("height", 19)
											.attr("fill", function(d,i) {return mtrCol[i]});
						
					chartHolder3.append("g")
								.attr("class", "axis")
								.attr("transform", "translate(170," + (debtPerClassDataForPie.length*20 + 515) + ")")
								.call(d3.svg.axis()
									.scale(weightPerClassScale)
									.orient("bottom"));
						
					/*
					//holder for the piechart
					var chartHolder3 = overviewPieHolder.append("svg:svg")
										.attr("width", svgRightWidth)
										.attr("height", svgHeight + svgHeightHistComt)
										.append("svg:g")
										.attr("transform", "translate(" + (svgRightWidth / 2 + 85) + "," + 610 + ")");
					
					//creates the piechart
					var arcs = chartHolder3.selectAll("path")
								  .data(donut(debtPerClassDataForPie))
								.enter().append("svg:path")
								  .attr("fill", function(d,i) { return mtrCol[i]; })
								  .attr("d", arc);
					*/

					
					//create holder for the text to the bottom pie chart
					var pieThreeTextHolder = overviewPieHolder.append("g");
					
					//print the text to the bottom piechart
					var pieThreeText = pieThreeTextHolder.selectAll("text")
									.data(debtPerClassDataForPie)
								   .enter().append("svg:text")
								    .attr("x", 45)
									.attr("y", function(d,i) { return i*20 + 525; })
									.text(function(d, i) { return Math.round(debtPerClassDataForPie[i]*100)/100 + " : " + debtPerClassDataForPieName[i]; })
									.attr("fill", function(d,i) { return mtrCol[i]; })
									.attr("font-weight", 600);
					
				}
				projectNumber++;
			});
		}});});});});});});});});
		
		
		
		
		
        </script>
    </body>
</html>